<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层级选择器</title>
	<script src="jquery-1.11.1.js"></script>
	<script>
		$(document).ready(function(){
			// console.log('ready');
			// $("li").css("font-size","30px");

			// 后代选择器
			// $(".wrap li").css("background","red");

			// 子带选择器
			// $(".wrap > ul > li").css("font-size","30px");

			// 紧邻选择器 
			$(".wrap + div").css("font-size","30px");


		})
	</script>
</head>
<body>
	<div class="wrap">
		<ul>
			<li>姐妹很多01
				<p>
					<ul>
						<li>孩子很多</li>
						<li>孩子很多</li>
						<li>孩子很多</li>
					</ul>
				</p>
			</li>
			<li>姐妹很多02</li>
			<li>姐妹很多03</li>
			<li>姐妹很多04</li>
			<li>姐妹很多05</li>
			<li>姐妹很多06</li>
			<li>姐妹很多07</li>
			<li>姐妹很多08</li>
			<li>姐妹很多09</li>
			<li>姐妹很多10</li>
		</ul>
	</div>
	<!-- <p>我是p元素</p> -->
	<div>
		我是第一个div 后面的兄弟div
	</div>
	<div>
		我是第二个div的后面的div
	</div>
</body>
</html>